<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="关键字" prop="keywords">
                <el-input v-model="queryParams.keywords" placeholder="请输入搜索关键字" clearable style="width: 240px"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="账套" prop="asId">
                <el-select v-model="queryParams.asId" placeholder="请选择查询账套" clearable style="width: 240px">
                    <el-option v-for="dict in as_list" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="仓库" prop="whId">
                <el-select v-model="queryParams.whId" placeholder="请选择查询仓库" clearable style="width: 240px">
                    <el-option v-for="dict in wh_list" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd"
                    v-hasPermi="['base:product:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" @click="handleSetPackaging"
                    v-hasPermi="['base:product:packaging']">批量设置包装费</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="商品ID" align="center" prop="Id" />
            <el-table-column label="商品编号" align="center" prop="No" />
            <el-table-column label="商品名称" align="center" prop="Name" />
            <el-table-column label="计量单位" align="center" prop="UnitId">
                <template #default="scope">
                    <dict-tag :options="unit_list" :value="scope.row.UnitId" />
                </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" prop="Sepc" />
            <el-table-column label="税率" align="center" prop="TaxRate" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="View" @click="handleView(scope.row)"
                        v-hasPermi="['base:product:view']">查看</el-button>
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['base:product:edit']">编辑</el-button>
                    <!-- <el-button link type="primary" icon="Edit" @click="handleSetPackaging(scope.row)"
                        v-hasPermi="['base:product:packaging']">设置包装费</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改商品信息对话框 -->
        <el-dialog :title="title" v-model="open" width="80%" append-to-body>
            <el-form ref="productRef" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属账套" prop="asId">
                            <el-select v-model="form.asId" placeholder="请选择商品所属账套" @change="genProdNo()">
                                <el-option v-for="dict in as_list" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商品名称" prop="prod.name">
                            <el-input v-model="form.prod.name" placeholder="请输入商品名称" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="规格" prop="spec">
                            <el-input v-model="form.prod.spec" placeholder="请输入规格" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="首选仓库" prop="whId">
                            <el-select v-model="form.prod.whId" placeholder="请选择首选仓库">
                                <el-option v-for="dict in wh_list" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否启用多单位" prop="useMultiUnits">
                            <el-radio-group v-model="form.prod.useMultiUnits" disabled>
                                <el-radio v-for="dict in biz_yes_no" :key="dict.value" :value="dict.value">{{
                                    dict.label
                                    }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="基本单位" prop="unitId">
                            <el-select v-model="form.prod.unitId" placeholder="请选择基本计量单位（默认：斤）" disabled>
                                <el-option v-for="dict in unit_list" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="单位换算关系" prop="unitId">
                            <el-select v-model="form.unit.unitId" placeholder="请选择进销存单位（默认：件）" disabled>
                                <el-option v-for="dict in unit_list" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="=" prop="rate">
                            <el-input v-model="form.unit.rate" placeholder="请输入换算比例"><template
                                    #append>斤</template></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="税率" prop="taxRate">
                            <el-input v-model="form.prod.taxRate" placeholder="请输入税率"><template
                                    #append>%</template></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="note">
                            <el-input v-model="form.note" placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 添加或修改包装费用管理对话框 -->
        <packagingEdit ref="packagingedit" :productIds="selectIds" :productList="productList" 
            @closePackaging="closePackaging" />
    </div>
</template>

<script setup name="Product">
import { listProduct, getProduct, addProduct, updateProduct } from "@/api/base/product";
import { } from '@/api/sales/packaging';
import packagingEdit from '@/views/sales/packaging/components/packagingEdit.vue';


const { proxy } = getCurrentInstance();
const { as_list, wh_list, unit_list, biz_yes_no } = proxy.useDict('as_list', 'wh_list', 'unit_list', 'biz_yes_no');

const productList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const selectIds = ref([]);
const packagingedit = ref(null);

const data = reactive({
    form: {},
    queryParams: {
        pageSize: 300,
        pageNum: 1,
        keywords: null,
        asId: '200012857',
        whId: '100010002'
    },
    rules: {
        prod: {
            name: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
            prodNo: [{ required: true, message: "商品编码不能为空", trigger: "blur" }],
        }
    }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询商品信息列表 */
function getList() {
    loading.value = true;
    listProduct(queryParams.value).then(response => {
        productList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}


/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
}

/** 表单重置 */
function reset() {
    form.value = {
        asId: null,
        prod: {
            prodNo: null,
            name: null,
            spec: null,
            whId: null,
            unitId: '100010009',
            unitName: '斤',
            note: null,
            taxRate: 9,
            useMultiUnits: '1'
        },
        unit: {
            unitId: '100010008',
            unitName: '件',
            rate: 0
        }
    };
    proxy.resetForm("productRef");
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 多选框选中数据  */
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.Id);
}

/** 新增按钮操作 */
function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加商品信息";
}

/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    const _productId = row.Id || ids.value;
    getProduct(_productId).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改商品信息";
    });
}

/** 设置包装费按钮操作 */
function handleSetPackaging() {
    selectIds.value = ids.value;
    console.log("selectIds", selectIds.value);
    packagingedit.value.controllDialog(true);
}

/** 查看商品详情按钮操作 */
function handleView(row) {
    reset();
    const _productId = row.Id || ids.value;
    getProduct(_productId, queryParams.value.asId).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "查看商品信息";
    });
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["productRef"].validate(valid => {
        if (valid) {
            if (form.value.Id != null) {
                updateProduct(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addProduct(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

/** 关闭设置包装费的对话框按钮 */
function closePackaging() {
    packagingedit.value.controllDialog(false);
    selectIds.value = null;
    reset();
}

/** 是否渲染字段 */
function renderField(insert, edit) {
    return form.value.Id == null ? insert : edit;
}

/** 根据账套生成商品编号 */
function genProdNo() {
    const asId = form.value.asId;
    genProductNo(asId).then(response => {

    })
}


getList();
</script>